<template>
  <el-container>
    <el-aside width="auto">
      <AsideMenu/>
    </el-aside>
    <el-container>
      <el-header height="70px">
        <Header/>
      </el-header>
      <el-main>
        <el-card class="box-card">
          <el-scrollbar>
            <RouterView/>
          </el-scrollbar>
        </el-card>
      </el-main>
    </el-container>
  </el-container>

</template>

<script lang="ts" setup>
import AsideMenu from "@/components/AsideMenu.vue";
import Header from "@/components/Header"

</script>

<style scoped lang="less">
.el-container {

  .el-aside {
    //height: 100vh;
    width: 200px;

  }

  .el-header {
    box-shadow: 0px 1px 5px #cccc;
    background-color: white;
    box-sizing: border-box;
  }

  .el-main {
    height: calc(100vh - 70px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .box-card {
    height: 100%;
    border: transparent;
  }
}

</style>
